// 引入公共样式
require("../../assets/css/communal.less");

// 引入字体图标
require("../../assets/fonts/fitness-fonts/iconfont.css");

// 引入swiper
require("../../libs/swiper/swiper-bundle.css");
require("../../libs/swiper/swiper-bundle.js");

const axios = require("../../util/axios.js");
// 引入工具js
const dom = require("../../util/dom.js");

// 引入尾部导航栏样式
require("../../assets/css/common-css/tabber.less");

// 引入当前页样式
require("./index.less");

// swiper轮播图
document.addEventListener("DOMContentLoaded", function () {
	// 渲染底部导航栏
	dom.tabber("index");

	var swiper = new Swiper(".mySwiper", {
		slidesPerView: 1,
		spaceBetween: 30,
		loop: true,
		autoplay: {
			//自动播放
			delay: 2000,
			stopOnLastSlide: false,
			disableOnInteraction: false, //用户交互后不禁用自动播放
		},
		pagination: {
			el: ".swiper-pagination",
			clickable: true,
		},
		navigation: {
			nextEl: ".swiper-button-next",
			prevEl: ".swiper-button-prev",
		},
	});

	// 获取用户个人信息
	axios.get("/api/user/info").then((res) => {
		let data = res.data.data;
		// 渲染排名
		dom.$(".rankNum").textContent = data.ranking;
		// 渲染徽章
		dom.$(".badgeNum").textContent = data.badges;
	});

	// 获取用户打卡信息
	function renderClock() {
		axios.get("/api/user/clockInInfo").then((res) => {
			// 渲染打卡天数
			dom.$("#clockNum").textContent = res.data.data.clockCount;
			let btn = dom.$(".begin");
			if (res.data.data.isClockIn) {
				// 已打卡
				btn.disabled = true; /* 按钮禁用 */
				btn.textContent = "已打卡";
			}
		});
	}
	renderClock();

	// 绑定打卡事件
	dom.$(".begin").addEventListener("click", function () {
		// 发送请求打卡
		axios.post("/api/user/clockIn").then((res) => {
			if (res.data.errno === 0) {
				alert("打卡成功，明日继续加油");
				renderClock();
			}
		});
	});
});
